(defpackage :data-display-examples
  (:use :cl)
  (:export :define-data-display-examples))

(in-package :data-display-examples)


(defun define-accordion-example ()
  (spinneret:with-html
    (:div (:h3 "Accordion")
          (:div (:h4 "Accordion using radio inputs")
                (dui:accordion nil
                               (dui:accordion/item "collapse bg-base-200"
                                                   (dui:accordion/input "my-accordion-1" t)
                                                   (dui:accordion/label "collapse-title text-xl font-medium"
                                                                        "Click to open this one and close others1")
                                                   (:p "Hello1")
                                                   (:p "Hello2"))
                               (dui:accordion/item "collapse bg-base-200"
                                                   (dui:accordion/input "my-accordion-1")
                                                   (dui:accordion/label "collapse-title text-xl font-medium"
                                                                        "Click to open this one and close others2")
                                                   (:p "Hello1")
                                                   (:p "Hello2"))
                               (dui:accordion/item "collapse bg-base-200"
                                                   (dui:accordion/input "my-accordion-1")
                                                   (dui:accordion/label "collapse-title text-xl font-medium"
                                                                        "Click to open this one and close others3")
                                                   (:p "Hello1")
                                                   (:p "Hello2"))))
          (:div (:h4 "Accordion with arrow icon")
                (dui:accordion nil
                               (dui:accordion/item "collapse collapse-arrow bg-base-200"
                                                   (dui:accordion/input "my-accordion-2" t)
                                                   (dui:accordion/label "collapse-title text-xl font-medium"
                                                                        "Click to open this one and close others1")
                                                   (:p "Hello1")
                                                   (:p "Hello2"))
                               (dui:accordion/item "collapse collapse-arrow bg-base-200"
                                                   (dui:accordion/input "my-accordion-2")
                                                   (dui:accordion/label "collapse-title text-xl font-medium"
                                                                        "Click to open this one and close others2")
                                                   (:p "Hello1")
                                                   (:p "Hello2"))
                               (dui:accordion/item "collapse collapse-arrow bg-base-200"
                                                   (dui:accordion/input "my-accordion-2")
                                                   (dui:accordion/label "collapse-title text-xl font-medium"
                                                                        "Click to open this one and close others3")
                                                   (:p "Hello1")
                                                   (:p "Hello2"))))
          (:div (:h4 "Accordion with plus/minus icon")
                (dui:accordion nil
                               (dui:accordion/item "collapse collapse-plus bg-base-200"
                                                   (dui:accordion/input "my-accordion-3" t)
                                                   (dui:accordion/label "collapse-title text-xl font-medium"
                                                                        "Click to open this one and close others1")
                                                   (:p "Hello1")
                                                   (:p "Hello2"))
                               (dui:accordion/item "collapse collapse-plus bg-base-200"
                                                   (dui:accordion/input "my-accordion-3")
                                                   (dui:accordion/label "collapse-title text-xl font-medium"
                                                                        "Click to open this one and close others2")
                                                   (:p "Hello1")
                                                   (:p "Hello2"))
                               (dui:accordion/item "collapse collapse-plus bg-base-200"
                                                   (dui:accordion/input "my-accordion-3")
                                                   (dui:accordion/label "collapse-title text-xl font-medium"
                                                                        "Click to open this one and close others3")
                                                   (:p "Hello1")
                                                   (:p "Hello2"))))
          (:div (:h4 "Using Accordion and Join together")
                (dui:accordion "join join-vertical w-full"
                               (dui:accordion/item "collapse collapse-arrow join-item border-base-300 border"
                                                   (dui:accordion/input "my-accordion-4" t)
                                                   (dui:accordion/label "collapse-title text-xl font-medium"
                                                                        "Click to open this one and close others1")
                                                   (:p "Hello1")
                                                   (:p "Hello2"))
                               (dui:accordion/item "collapse collapse-arrow join-item border-base-300 border"
                                                   (dui:accordion/input "my-accordion-4")
                                                   (dui:accordion/label "collapse-title text-xl font-medium"
                                                                        "Click to open this one and close others2")
                                                   (:p "Hello1")
                                                   (:p "Hello2"))
                               (dui:accordion/item "collapse collapse-arrow join-item border-base-300 border"
                                                   (dui:accordion/input "my-accordion-4")
                                                   (dui:accordion/label "collapse-title text-xl font-medium"
                                                                        "Click to open this one and close others3")
                                                   (:p "Hello1")
                                                   (:p "Hello2")))))))

(defun define-avatar-example ()
  (spinneret:with-html
    (:div (:h3 "Avatar")
          (:div (:h4 "Avatar default")
                (dui:avatar "avatar not-prose" "w-24 rounded"
                            (:img :src "https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp")))
          (:div (:h4 "Avatar in custom sizes")
                (dui:avatar "avatar not-prose" "w-32 rounded"
                            (:img :src "https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp"
                                  :alt "Avatar-component"))
                (dui:avatar "avatar not-prose" "w-20 rounded"
                            (:img :src "https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp"
                                  :alt "Avatar-component"))
                (dui:avatar "avatar not-prose" "w-16 rounded"
                            (:img :src "https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp"
                                  :alt "Avatar-component")))
          (:div (:h4 "Avatar rounded")
                (dui:avatar "avatar not-prose" "w-24 rounded-xl"
                            (:img :src "https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp"))
                (dui:avatar "avatar not-prose" "w-24 rounded-full"
                            (:img :src "https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp")))
          (:div (:h4 "Avatar with mask")
                (dui:avatar "avatar not-prose" "mask mask-squircle w-24"
                            (:img :src "https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp"))
                (dui:avatar "avatar not-prose" "mask mask-hexagon w-24"
                            (:img :src "https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp"))
                (dui:avatar "avatar not-prose" "mask mask-triangle w-24"
                            (:img :src "https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp")))
          (:div (:h4 "Avatar group with counter")
                (:div :class "avatar-group -space-x-6 rtl:space-x-reverse"
                      (dui:avatar "avatar not-prose" "w-12"
                                  (:img :src "https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp"))
                      (dui:avatar "avatar not-prose" "w-12"
                                  (:img :src "https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp"))
                      (dui:avatar "avatar not-prose" "w-12"
                                  (:img :src "https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp"))
                      (dui:avatar "avatar placeholder not-prose" "bg-neutral text-neutral-content w-12"
                                  (:span "+99"))))
          (:div (:h4 " Avatar with ring")
                (dui:avatar "avatar not-prose" "ring-primary ring-offset-base-100 w-24 rounded-full ring ring-offset-2"
                            (:img :src "https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp"))))))


(defun define-badge-example ()
  (spinneret:with-html
    (:div (:h3 "Badge")
          (:div (:h4 "Badge default")
                (dui:badge "badge" "badge")
                (:span :class "badge" "Badge"))
          (:div (:h4 "Badge with brand colors")
                (dui:badge "badge" "default")
                (dui:badge "badge badge-neutral" "neutral")
                (dui:badge "badge badge-primary" "primary")
                (dui:badge "badge badge-secondary" "secondary")
                (dui:badge "badge badge-accent" "accent")
                (dui:badge "badge badge-ghost" "ghost"))
          (:div (:h4 "Badge in a button")
                (:button :class "btn"
                         "Inbox"
                         (:div :class "badge" "+99"))
                (:button :class "btn"
                         "Inbox"
                         (:div :class "badge badge-secondary" "+99"))))))

(defun define-card-example ()
  (spinneret:with-html
    (:div (:h3 "Card")
          (:div (:h4 "Card default")
                (dui:card "card bg-base-100 w-96 shadow-xl not-prose"
                          (:figure (:img :src "https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"))
                          (:div :class "card-body"
                                (:h2 :class "card-title" "Shoes!")
                                (:p "If a dog chews shoes whose shoes does he choose?")
                                (:div :class "card-actions justify-end"
                                      (:button :class "btn btn-primary" "Buy Now")))))
          (:div (:h4 "Compact card")
                (dui:card "card card-compact bg-base-100 w-96 shadow-xl not-prose"
                          (:figure (:img :src "https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"))
                          (:div :class "card-body"
                                (:h2 :class "card-title" "Shoes!")
                                (:p "If a dog chews shoes whose shoes does he choose?")
                                (:div :class "card-actions justify-end"
                                      (:button :class "btn btn-primary" "Buy Now"))))))))

(defun define-carousal-example ()
  (spinneret:with-html
    (:div (:h3 "Carousel")
          (:div (:h4 "Carousel default")
                (dui:carousel "carousel rounded-box"
                              (dui:carousel-item "carousel-item"
                                                 (html:img "https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp"
                                                          :alt "Burger"))
                              (dui:carousel-item "carousel-item"
                                                 (html:img "https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp"))
                              (dui:carousel-item "carousel-item"
                                                 (html:img "https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp"))
                              (dui:carousel-item "carousel-item"
                                                 (html:img "https://img.daisyui.com/images/stock/photo-1494253109108-2e30c049369b.webp"))
                              (dui:carousel-item "carousel-item"
                                                 (html:img "https://img.daisyui.com/images/stock/photo-1550258987-190a2d41a8ba.webp"))
                              (dui:carousel-item "carousel-item"
                                                 (html:img "https://img.daisyui.com/images/stock/photo-1559181567-c3190ca9959b.webp"))))
          (:div (:h4 "Snap to center")
                (dui:carousel "carousel carousel-center rounded-box"
                              (dui:carousel-item "carousel-item"
                                                 (html:img "https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp"
                                                          :alt "Burger"))
                              (dui:carousel-item "carousel-item"
                                                 (html:img "https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp"))
                              (dui:carousel-item "carousel-item"
                                                 (html:img "https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp"))
                              (dui:carousel-item "carousel-item"
                                                 (html:img "https://img.daisyui.com/images/stock/photo-1494253109108-2e30c049369b.webp"))
                              (dui:carousel-item "carousel-item"
                                                 (html:img "https://img.daisyui.com/images/stock/photo-1550258987-190a2d41a8ba.webp"))
                              (dui:carousel-item "carousel-item"
                                                 (html:img "https://img.daisyui.com/images/stock/photo-1559181567-c3190ca9959b.webp"))))
          (:div (:h4 "Carousel with indicator buttons")
                (dui:carousel "carousel w-full"
                              (dui:carousel-item "carousel-item w-full"
                                                 (html:img "https://img.daisyui.com/images/stock/photo-1625726411847-8cbb60cc71e6.webp"
                                                          :alt "Burger" :class "w-full")
                                                 :id "item1")
                              (dui:carousel-item "carousel-item w-full"
                                                 (html:img "https://img.daisyui.com/images/stock/photo-1609621838510-5ad474b7d25d.webp" "Burger" :class "w-full")
                                                 :id "item2")
                              (dui:carousel-item "carousel-item w-full"
                                                 (html:img "https://img.daisyui.com/images/stock/photo-1414694762283-acccc27bca85.webp" "Burger" :class "w-full")
                                                 :id "item3")
                              (dui:carousel-item "carousel-item w-full"
                                                 (html:img "https://img.daisyui.com/images/stock/photo-1665553365602-b2fb8e5d1707.webp" "Burger" :class "w-full")
                                                 :id "item4"))
                (:div :class "flex w-full justify-center gap-2 py-2"
                      (html:a "#item1" "1" :class "btn btn-xs")
                      (html:a "#item2" "2" :class "btn btn-xs")
                      (html:a "#item3" "3" :class "btn btn-xs")
                      (html:a "#item4" "4" :class "btn btn-xs"))))))

(defun define-kbd-example ()
  (spinneret:with-html
    (:div (:h3 "Kbd")
          (:div (:h4 "Kbd")
                (dui:kbd "kbd" "A")))))

(defun define-data-display-examples ()
  (spinneret:with-html
    (:div
     ;; Accordion
     (define-accordion-example)
     ;; avatar
     (define-avatar-example)
     ;; badge
     (define-badge-example)
     ;; card
     (define-card-example)
     ;; carousal
     (define-carousal-example)
     ;; Chat bubble
     ;; ...
     )))

(defun compile-accordion-example ()
  (spinneret:with-html-string
    (define-accordion-example)))

(defun compile-avatar-example ()
  (spinneret:with-html-string
    (define-avatar-example)))

(defun compile-badge-example ()
  (spinneret:with-html-string
    (define-badge-example)))

(defun compile-card-example ()
  (spinneret:with-html-string
    (define-card-example)))

(defun compile-carousal-example ()
  (spinneret:with-html-string
    (define-carousal-example)))

(defun compile-kbd-example ()
  (spinneret:with-html-string
    (define-kbd-example)))

(easy-routes:defroute data-display-accordion ("/data-display/accordion" :method :get) ()
  (compile-accordion-example))

(easy-routes:defroute data-display-avatar ("/data-display/avatar" :method :get) ()
  (compile-avatar-example))

(easy-routes:defroute data-display-badge ("/data-display/badge" :method :get) ()
  (compile-badge-example))

(easy-routes:defroute data-display-card ("/data-display/card" :method :get) ()
  (compile-card-example))

(easy-routes:defroute data-display-carousal ("/data-display/carousal" :method :get) ()
  (compile-carousal-example))

(easy-routes:defroute data-display-kbd ("/data-display/kbd" :method :get) ()
  (compile-kbd-example))
